<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>接口调用</title>


  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="description">
  <meta name="description" content="Charisma, a fully featured, responsive, HTML5, Bootstrap admin template.">
  <meta name="author" content="Muhammad Usman">
  <link id="bs-css" href="css/bootstrap-cerulean.min.css" rel="stylesheet">
  <link href="css/charisma-app.css" rel="stylesheet">
  <link href='bower_components/fullcalendar/dist/fullcalendar.css' rel='stylesheet'>
  <link href='bower_components/chosen/chosen.min.css' rel='stylesheet'>
  <link href='bower_components/colorbox/example3/colorbox.css' rel='stylesheet'>
  <link href='bower_components/responsive-tables/responsive-tables.css' rel='stylesheet'>
  <link href='bower_components/bootstrap-tour/build/css/bootstrap-tour.min.css' rel='stylesheet'>
  <link href='css/jquery.noty.css' rel='stylesheet'>
  <link href='css/noty_theme_default.css' rel='stylesheet'>
  <link href='css/elfinder.min.css' rel='stylesheet'>
  <link href='css/elfinder.theme.css' rel='stylesheet'>
  <link href='css/jquery.iphone.toggle.css' rel='stylesheet'>
  <link href='css/uploadify.css' rel='stylesheet'>
  <link href='css/animate.min.css' rel='stylesheet'>
  <script src="bower_components/jquery/jquery.min.js"></script>
  <link rel="shortcut icon" href="img/favicon.ico">

  <style>
    #box-content {
      text-align: left;
      padding-left: 10px;
      /* 增加左边距 */
      margin-left: 0;
      /* 清除默认的左边距 */
    }
  </style>
</head>

<body>
  <div class="navbar navbar-default" role="navigation"></div>
  <div class="ch-container">
    <div class="row">
      <div class="col-sm-2 col-lg-2">
        <div class="sidebar-nav">
          <div class="nav-canvas">
            <div class="nav-sm nav nav-stacked">
            </div>
            <nav>
              <ul class="nav nav-pills nav-stacked main-menu">
                <li class="nav-header">Main</li>
                <li><a href="/">s1</a></li>
                <li><a href="/s2">s2</a></li>
                <li class="accordion">
                  <a href="#"><i class="glyphicon glyphicon-plus"></i><span> 父菜单</span></a>
                  <ul class="nav nav-pills nav-stacked">
                    <li><a href="/s3">s3</a></li>
                    <li><a href="/s4">s4</a></li>
                  </ul>
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </div>

      <noscript>
        <div class="alert alert-block col-md-12">
        </div>
      </noscript>

      <div id="content" class="col-lg-10 col-sm-10">
        <div class="row">
          <div class="box col-md-12">
            <div class="box-inner">
              <div class="box-header well">
                <h2><i class="glyphicon glyphicon-info-sign"></i> 页面</h2>

                <div class="box-icon">
                  <a href="#" class="btn btn-minimize btn-round btn-default">
                    <i class="glyphicon glyphicon-chevron-up"></i></a>
                  <a href="#" class="btn btn-close btn-round btn-default">
                    <i class="glyphicon glyphicon-remove"></i></a>
                </div>
              </div>
              <div class="box-content row" id="box-content">
                <!-- 这里将显示路由内容 -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    console.log('hello,body标签的内联样式');
    const siteTitle = 'A Fabulous Company';
    const routes = {
      404: {
        page: '/pages/404.html',
        title: '404 | ' + siteTitle,
        description: 'Page not found'
      },
      '/': {
        page: '/pages/s1.html',
        title: 's1 | ' + siteTitle,
        description: 'Home Page'
      },
      '/s2': {
        page: '/pages/s2.html',
        title: 's2 | ' + siteTitle,
        description: 'About Us'
      },
      '/s3': {
        page: '/pages/s3.html',
        title: 's3 | ' + siteTitle,
        description: 'Our Services'
      },
      '/s4': {
        page: '/pages/s4.html',
        title: 's4 | ' + siteTitle,
        description: 'Contact Us'
      }
    };

    // 为导航添加点击事件处理程序
    document.querySelector('nav').addEventListener('click', (e) => {
      if (e.target.tagName === 'A') {
        e.preventDefault();
        useRoute(e.target.getAttribute('href'));
      }
    });

    const useRoute = (path) => {
      window.history.pushState({ page: path }, '', path);
      renderPage(path);
    };

    const renderPage = async (path) => {
      console.log('renderPage function is called');
      const route = routes[path] || routes[404];
      try {
        const response = await fetch(route.page);
        const data = await response.text();
        document.getElementById('box-content').innerHTML = data;
        document.title = route.title;
        document.querySelector('meta[name="description"]').setAttribute('content', route.description);
        // 执行子路由中的脚本
        executeScriptsInContent();
        // 重新绑定事件
        bindEvents();
      } catch (error) {
        console.error('Error fetching page:', error);
        // 显示 404 页面内容
        document.getElementById('box-content').innerHTML = '<h2>404 - Page Not Found</h2><p>The page you are looking for does not exist.</p>';
        document.title = routes[404].title;
        document.querySelector('meta[name="description"]').setAttribute('content', routes[404].description);
      }
    };

    const executeScriptsInContent = () => {
      const scripts = document.getElementById('box-content').getElementsByTagName('script');
      for (let i = 0; i < scripts.length; i++) {
        const script = scripts[i];
        const newScript = document.createElement('script');
        // 复制脚本元素的属性
        if (script.src) {
          newScript.src = script.src;
        } else {
          newScript.textContent = script.textContent;
        }
        // 替换原脚本元素
        script.parentNode.replaceChild(newScript, script);
      }
    };

    // 绑定事件
    const bindEvents = () => {
      const addRowButtons = document.getElementById('box-content').querySelectorAll('button[data-action="addRow"]');
      addRowButtons.forEach(button => {
        button.addEventListener('click', addRow);
      });
      const editRowButtons = document.getElementById('box-content').querySelectorAll('button[data-action="editRow"]');
      editRowButtons.forEach(button => {
        button.addEventListener('click', () => {
          editRow(button);
        });
      });
      const deleteRowButtons = document.getElementById('box-content').querySelectorAll('button[data-action="deleteRow"]');
      deleteRowButtons.forEach(button => {
        button.addEventListener('click', () => {
          deleteRow(button);
        });
      });
    };


    // 初始页面加载
    renderPage(window.location.pathname);

    // 监听浏览器历史事件
    window.onpopstate = (event) => {
      renderPage(event.state.page);
    };
  </script>

  <div id='root'></div>
  <div class="col-md-9 col-lg-9 col-xs-9 hidden-xs">
    <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
  </div>
  </div>
  <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="js/jquery.cookie.js"></script>
  <script src='bower_components/moment/min/moment.min.js'></script>
  <script src='bower_components/fullcalendar/dist/fullcalendar.min.js'></script>
  <script src='js/jquery.dataTables.min.js'></script>
  <script src="bower_components/chosen/chosen.jquery.min.js"></script>
  <script src="bower_components/colorbox/jquery.colorbox-min.js"></script>
  <script src="js/jquery.noty.js"></script>
  <script src="bower_components/responsive-tables/responsive-tables.js"></script>
  <script src="bower_components/bootstrap-tour/build/js/bootstrap-tour.min.js"></script>
  <script src="js/jquery.raty.min.js"></script>
  <script src="js/jquery.iphone.toggle.js"></script>
  <script src="js/jquery.autogrow-textarea.js"></script>
  <script src="js/jquery.uploadify-3.1.min.js"></script>
  <script src="js/jquery.history.js"></script>
  <script src="js/charisma.js"></script>

</body>

</html>